<template>
  <div
    class="echarts"
    id="echartsnuble"
    ref="chartRef"
    style="width: 100%; height: 100%"
  ></div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts/core";
import { BarChart, LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // 数据集组件
  DatasetComponent,
  // 内置数据转换器组件 (filter, sort)
  TransformComponent,
  // 新增：图例组件
  LegendComponent,
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type {
  // 系列类型的定义后缀都为 SeriesOption
  BarSeriesOption,
  LineSeriesOption,
} from "echarts/charts";
import type {
  // 组件类型的定义后缀都为 ComponentOption
  TitleComponentOption,
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption,
  // 新增：图例组件类型定义
  LegendComponentOption,
} from "echarts/components";
import type { ComposeOption } from "echarts/core";
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
  | LegendComponentOption // 新增：图例组件类型
>;
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  // 新增：注册图例组件
  LegendComponent,
]);
const chartRef = ref<HTMLElement | null>(null);
const props = defineProps<{
  bar_chart: [];
  rawData:[]
}>();

onMounted(() => {
      if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    // There should not be negative values in rawData
    const rawData = props.rawData;
    const totalData = [];
    
      for (let i = 0; i < rawData[0].length; ++i) {
      let sum = 0;
      for (let j = 0; j < rawData.length; ++j) {
        sum += rawData[j][i];
      }
      totalData.push(sum);
    }
    
    

    const grid = {
      // left: 100,
      // right: 100,
      // top: 50,
      bottom: 20,
    };
    const seriesColors = ["#5B8FF9", "#5AD8A6"]; // 定义每个系列对应的颜色
    const series = ["目前成绩", "预计提分"].map((name, sid) => {
      return {
        name,
        type: "bar",
        stack: "total",
        barWidth: "30px",
        data: rawData[sid],
        itemStyle: {
          color: seriesColors[sid], // 根据索引设置颜色
        },
      };
    });
    const option = {
      legend: {
        right: "10%", // 距离图表右侧 10% 的位置
        itemWidth: 10, // 调整图例图标宽度
        itemHeight: 10, // 调整图例图标高度，宽高一致以保证是圆
      },

      tooltip: {
        trigger: "item",
      },
      yAxis: {
        //   min: 0, // 若需要可以设置最小值，这里设置为 0
        max: 100, // 设置 y 轴的最大值为 100
      },
      title: {
        text: "提分分析",
      },
      grid,
      // yAxis: {
      //   // type: 'value',
      //   // max: 100 // 设置 y 轴的最大值为 100
      // },
      xAxis: {
        type: "category",
        data:props.bar_chart ,
      },
      // ["数学", "语文", "英语", "地理", "化学", "生物"]
      series,
    };
    const chartDom = document.getElementById("echartsnuble");
    if (chartDom) {
      const myChart = echarts.init(chartDom);
      myChart.setOption(option);
      // 监听窗口大小变化事件
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
    chart.setOption(option);
  }
  

});
</script>
<style lang="less" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
